<template>
  <el-row>
    <el-col :span="3">
      <left-nav-menu :length="4" @select="leftMenuSelect">
        <span slot="0"><i class="icon-list" />日报</span>
        <span slot="1"><i class="icon-list" />周报</span>
        <span slot="2"><i class="icon-list" />月报</span>
        <span slot="3"><i class="icon-list" />综合分析</span>
      </left-nav-menu>
    </el-col>
    <el-col :span="21">
      <daily-report v-show="leftNavMenuIndex === '0'"></daily-report>
      <weekly-report v-show="leftNavMenuIndex === '1'"></weekly-report>
      <monthly-report v-show="leftNavMenuIndex === '2'"></monthly-report>
      <evaluation-report v-show="leftNavMenuIndex === '3'"></evaluation-report>
    </el-col>
  </el-row>
</template>

<script>
import LeftNavMenu from "~/components/LeftNavMenu";
import EvaluationReport from "~/views/analysis-report/EvaluationReport";
import DailyReport from "~/views/analysis-report/DailyReport";
import WeeklyReport from "~/views/analysis-report/WeeklyReport";
import MonthlyReport from "~/views/analysis-report/MonthlyReport";
export default {
  name: "AnalysisReport",
  data() {
    return {
      leftNavMenuIndex: "0",
    };
  },
  components: {
    EvaluationReport,
    LeftNavMenu,
    DailyReport,
    WeeklyReport,
    MonthlyReport,
  },
  methods: {
    leftMenuSelect(index) {
      this.leftNavMenuIndex = index;
    },
  },
};
</script>

<style scoped>
span {
  font-size: 1.4em;
}
i {
  margin-right: 12px;
  font-size: 1.2em;
  color: black;
}
</style>
